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These  slides  intended  for  use  with  the  text  book,  “Building  your  Own  Web  Site  the  Right  Way  Using 

HTML  & CSS”  by  Ian  Lloyd,  and  Available  from  Sitepoint  books. 


The  big  picture 
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In  the  modern  era  of  web  design 
we  represent  content  and 
meaning  in  HTML  an  formatting 
and  layout  in  CSS. 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict// 
EN"  ''http://vmw.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 
<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graphical.css"/**/; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:  I px  solid  redjpadding:. 

5em;margin:0  25%} 

a img{border:none} 

.hot  br,  .quick  br,  dl.feature2  img{display:none} 
div#main  label,  legend{font-weight:bold} 


Separation  of  concerns  / specialization 


Developer 


Designer 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0 
Strict//EN"  "http://www.w3.org/TR/xhtml  I /DTD/xhtml  I - 
strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


@import  "/CSS/graphical.css"/**/; 

p.text  strong,  .verbose,  .verbose  p,  .verbose  h2{text- 

indent:-876em;position:absolute} 

p.text  strong  a{text-decoration:none} 

p.text  em{font-weight:bold;font-style:normal} 

div.alert{background:#eee;border:  I px  solid 


Everyone  needs  to  know  some  HTML  and  some  CSS  and  some  programming  - but  to  be  truly 
skilled  at  a professional  level  requires  deep  understanding  and  specialization. 
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HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 
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History  of  HTML  / CSS 

HTML  1.0  - 1993  - The  Good  Old  Days  - life  was  simple 
HTML  2.0  - 1995  - Some  interesting  layout  features  - abused 
CSS  1-1996 
HTML  3.2-  1997 

HTML  4.0  - 1 997  - Layout  moving  toward  CSS 
CSS  Level  2-1998 


HTML  4.01  - 1999  - What  we  use  today 


HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


Designing  for  the  Real  World.... 
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Inline  Styles 


<p>A  sentance.</p> 

<p  style="color:  red;  font-weight:  bold;"> 
The  quick  brown  fox  jumps  over  the  lazy 
dog.</p> 

<p>Another  sentance.</p> 


A sentancc. 

The  quick  brown  fox  jumps  over  the  lazy  dog. 


Another  sentancc. 


Span  when  there  is  no  block 


<p><span  style="color:  blue;  font-weight:  bold;">Bubble 
Under</span>  is  a group  of  diving  enthusiasts  based  in  the 
south-west  UK  who  meet  up  for  diving  trips  in  the  summer 
months  when  the  weather  is  good  and  the  bacon  rolls  are 
flowing. We  arrange  weekends  away  as  small  groups  to  cut  the 
costs  of  accommodation  and  travel  and  to  ensure  that  everyone 
gets  a trustworthy  dive  buddy.</p> 


Bubble  Under  is  a group  of  diving 
enthusiasts  based  in  the  south-west  UK  who 


meet  up  for  diving  trips  in  the  summer 
months  when  the  weather  is  good  and  the 
bacon  rolls  are  flowing.  We  arrange 
weekends  away  as  small  groups  to  cut  the 
costs  of  accommodation  and  travel  and  to 


ensure  that  everyone  gets  a trustworthy  dive 
buddy. 


Embedded  Style 


<head> 

<title>Biibble  Under  - The  diving  club  for  the  south-west  UK</title> 
<meta  http-equiv*"Content-Type"  content-"text/html ; charset=utf-8"  /> 

<style  type- 'text/css  > 

P { 

font -weight:  bold; 

} 

</style> 

</head> 

<body> 

<hl>A  Header</hl> 

<p>A  Paragraph</p> 

<p>Anot he r</p> 


A Header 

A Paragraph 
Another 


Anatomy  of  a CSS  Rule 

Selector  Curly  Brace 


font -weight:  bold;  — = -j  Declaration 

color:  blue; 

} ' 

Property 


Value 
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/> 


typ 


<head> 

<title>Bubble  Under  - The  diving  club  for  the 
south-west  UK</title> 

<meta  http-equiv-  ’Content-Type” 
content-  ' text/html ; i 

<link  href- 'ext. css 
</head> 

<body> 

<hl>A  Header</hl> 

<p>A  Paragraph</p> 

<p>Anothe  r</p> 

</body> 


/> 


External  Style 
Sheets 

A Header 

A Paragraph 


/’ 


CSS  for  Bubble  Under  site 
V 

P { 

font-weight:  bold; 
color:  blue; 


SS 


} 


Another 


clDOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 

"http : //www . w3 . org/TR/xhtml  1/DTD/xhtml 1- st ri  ct . dtd"> 

<html  xml ns-" http : //www .w3 . org/1999/xhtml "> 

<head> 

<title>Bubble  Under  - The  diving  club  for  the  south-west  UK</title> 
<meta  http-equiv-,,Content-Type,,  content-"text/html ; charset-utf-8"  /> 
<link  href- "sty lei. css"  rel-"stylesheet"  type-  'text/css"  /> 

</head> 


<body> 

<div  id-  leader1  > 

<div  id-"sitebranding"> 

<hl>BubbleUnder . com</hl> 
</div> 


We  have  styled  the 
site  *after*  the 
HTML  was  prodced. 


/* 

CSS  for  Bubble  Under  site 
*/ 

body  { 

f ont-f  cmily : Verdana; 

} 
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BubbleUnder.com 

Diving  club  for  the  south-west  UK  - let's  make  a splash! 


• Home 

• About  Us 

• Contact  Us 


Welcome  to  our  super-dooper  Scuba 
site 


Glad  you  could  drop  in  and  share  some  air  with  us!  You've  passed 
your  underwater  navigation  skills  and  successfully  found  your  way 
to  the  start  point  - or  in  this  case,  our  home  page. 


A 


body  { 

font-family:Verdana,  Helvetica, Arial,  sans-serif; 
background-color:  #e2edff; 
line-height:  125%; 
padding:  I5px; 

} 

hl  { 

font-family:  "Trebuchet  MS",  Helvetica,  Arial,  sans-serif; 
font-size:  x-large; 

} 

li{ 

font-size:  small; 

} 

h2{ 

color:  blue; 
font-size:  medium; 
font-weight:  normal; 

} 

P{ 

font-size:  small; 
color:  navy; 

> 


Now  we  are 
stylin’ 

Bubblellnder.com 

Diving  club  for  the  south-west  UK  - let's  make  a splash! 

• Home 

• About  Us 

• Contact  Us 

Welcome  to  our  super-dooper  Scuba  site 


Glad  you  could  drop  in  and  share  some  air  with  us!  You’ve 
passed  your  underwater  navigation  skills  and  successfully 
found  your  way  to  the  start  point  - or  in  this  case,  our 
home  page. 


Body  Styling 


body  { 

font-family: Verdana,  Helvetica, Arial,  sans-serif; 
background-color:  #e2edff; 
line-height:  125%; 
padding:  I5px; 

} 


This  applies  to  everything  in  the  document  between  <body>  and  </body>  - it 

is  inherited  by  paragraphs  within  body 


Colors... 


Three  Numbers, 
Red,  Green  , and 
Blue  - each  from  00 
- FF  (Hexidecimal) 


#ffffff  = white 
#000000  = black 
#f  f 0000  = red 
#00ff00  = green 
#0000ff  = blue 


#e2edff 


Color  Name 

Color  HEX 

Color 

AliceBlue 

#F0F8FF 

AntiaueWhite 

#FAEBD7 

Aqua 

#00FFFF 

Aauamarine 

#7FFFD4 

Azure 

#F0FFFF 

Beiae 

#F5F5DC 
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#FFE4C4 

Black 

#000000 

BlanchedAlmond 

#FFEBCD 

Blue 

#0000FF 

BlueViolet 

#8A2BE2 

Brown 

a • a a a 1 

#A52A2A 

http://www.w3schools.com/css/css  colornames.asp 


Web-safe 

colors 


Web-Safe  Colors 


• In  the  old  days  some  computers 
had  only  256  colors  simultaneously 

• There  were  2 1 6 agreed  on  web- 
safe  colors 

• For  now  - historical  factoid 


http://www.w3schools.com/html/html_colors.asp 
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Web-Smart  Colors 


• Web-smart  colors  are  4096  colors  which 
should  easily  display  accurately  on  all 
systems  with  > 256  colors 

• Web  smart  colors  simply  use  any 
combination  of  00,  I 1 , 22, ...  cc,  dd,  ee,  ff 

• #0055ee 


http://www.morecrayons.com/palettes/webSmart 

http://www.weborum.com/color/wheel.html 


Copyright  © 2001-2008  Kirk  Franklin.  All  rights  reservec. 


Fonts 


Default  fonts  are  ugly  and  they  have 
Serifs  - which  make  them  harder  to 
read  on  a screen 

So  the  first  thing  I usually  want  to  do 
is  override  the  font  in  my  document 


And  I want  to  do  this  everywhere. 


Header  One 

Paragraph  about  ugly  default  fonts. 


Figure  3.5.  Highlighting  the  serifs  of  a serif  font  (Georgia) 


0 ©0  © © 


Fonts 


Most  Favourite  Least  Favourite 

body { > 

font-family:  "Trebuchet  MS",  Helvetica,  Arial,  sans-serif; 

font-size:  x-large; 

} 


Fallback  fonts:  serif,  sans-serif,  monospace,  cursive  and  fantasy. 


Font  Factors 


font-size: 
xx-small 
x-small 
small 
medium 
large 
x- large 
xx-large 


font-weight:  bold  or  normal 

font-style:  normal  or  italic 

text-decoration:  none,  underline,  overline,  or 

line-through 


Reaching  into  Markup 


<p>And  when  we're  not  diving,  we  often  meet  up  in  a local  pub  to 
talk  about  our  recent  adventures  (<em>any</em>  excuse,  eh?).</p> 


em  { 

font-style:  normal; 
text-transform:  uppercase; 


} 


And  when  we're  not  diving, 
we  often  meet  up  in  a local 

pub 

to  talk  about  our  recent 
adventures  (ANY  excuse, 

eh?). 


a{ 

font-weight:  bold; 

} 

arlink  { 
color:  black; 

} 

a:visited  { 
color:  gray; 

} 

a:  hover  { 

text-decoration:  none; 
color:  white; 
background-color:  navy; 

} 

a:active  { 
color:  aqua; 

background-color:  navy; 

} 


Styling  Links 


• link  - before  a visit 

•visited  - after  it  has  been  visited 

• hover  - when  your  mouse  is  over  it 
but  you  have  not  clicked 

• active  - you  have  clicked  it  and  you 
have  not  yet  see  the  new  page 


Browser  default  styling  for  links  is 

downright  ugly! 


Styling  a block  with  “id” 


Everything  within  block  Paragraphs  within  block 


#tagline  { 

#tagline  p { 

font-style:  italic; 

a r 

font-style:  italic; 

font-family:Times,  serif; 

or 

font-family:  Times,  serif; 

} 

} 

<div  id="tagline"> 

<p>Diving  club  for  the  south-west  UK  - let's  make  a splash!</p> 
</div> 


id=  identifies  a *particular*  block  - only  one  in  a document 


Multiple  tags  with  same  styling 


h I,  h2,  h3  { 

color:  yellow; 
background-color:  black; 

} 


Making  a noticeable  background  color  is  a fun  way  to  debug  / identify  blocks. 


h2{ 

color:  blue; 
font-size:  medium; 
font-weight:  normal; 

} 

em  { 

text-transform:  uppercase; 

} 

hi, h2, h3  { 

font-family:  "Helvetica,  Arial,  sans-serif; 
background-color:  navy; 
color:  white; 


Last  rule  wins 
(when 
Identical) 


This  feature  is  a bit  “quirky”  in  some  browsers. 


Styling  with  class 


.fun  { 

color:  #339999; 

font-family:  Georgia, Times,  serif; 
letter- spacing:  0.05em; 

} 

<p  class="fun">A  man  walks  into  a bar;  you 
would've  thought  he'd  see  it  coming!</p> 

<p>Have  a nice  day.<p> 

<p  class=”fun”>More  fun  stuff</p> 


Class  can  be  used  many 
times  in  a document. 


Scoping  Classes  / Inheritance 


.fun  { 

font-family:Times,  serif; 
color:  #339999; 
letter- spacing:  0.05em; 

} 

blockquote.fun  { 
font-style:  italic; 

} 


^►<p  class=”fun”>  I am  outside</p> 
<blockquote> 

<p  class=”fun”>  I am  inside</p> 
</blockquote> 


Both  apply  to  “I  am  inside”  - the 
styles  “Cascade”  or  “tumble 

down”... 


Span  (Invisible  tag) 


<p><span  class="fun">Bubble  Under</span>  is  a group  of  diving 
enthusiasts  based  in  the  south-west  UK  who  meet  up  for  diving 
trips  in  the  summer  months  when  the  weather  is  good  and  the 
bacon  rolls  are  flowing. We  arrange  weekends  away  as  small 
groups  to  cut  the  costs  of  accommodation  and  travel  and  to 
ensure  that  everyone  gets  a trustworthy  dive  buddy.</p> 


Something  you  want  to  style  something  smaller  than  a whole  block  - then  use  span.  Do  not  use  span 
if  you  are  applying  something  to  a whole  block  - just  put  your  styling  on  the  enclosing  block  tag. 


Don’t  Overuse 
Span/Div 

• Don’t  add  unnecessary  div 
tags  when  you  already 
have  a block  tag  to  add  a 
class  to 

• Don’t  invent  your  own 
spans  when  something 
exists  that  will  work 


<div  class=”important”> 

<P> 

This  is 

<span  class=”heavy”>a</span> 
paragraph. 

</p> 

</div> 


<p  class=”important”> 

This  is  <strong>a</strong> 
paragraph. 

</p> 


Quick  Advertisement  - Firefox 


• You  pretty  much  need  to  use  Firefox  for  serious  website  development 

• Important  plugins: 

• Web  Developer  - Chris  Pedrick 

• FireBug  - Joe  Hewitt 

http://addons.mozilla.org/ 
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G T Google 


Latest  Headlines.^  Sakai  dr-chuck.com  NWA  Chuck's  Medial  Sakai  Based  Service:...  iPhone  Navigation  Personal  Learning  an... 

Miscellaneous  1 


^ Disable  T Q Cookies  ▼ CSS  ▼ Forms 


^ Images 


Information 


Outline 


Resize 


Tools  ▼ 


J " 

Charles  Severance 

I*rli 


Quick  Links 

Chuck's  TV  and  Media 
[Chuck's  Talks! 
Chuck's  Book 
|Chuck*s  Columns  1 
Resume  and  Bio 
Blog  (26-Nov  11:44) 
Chuck's  Papers 

lUM  School  of  Infoimation 
[Sakai  Planet  Blogl 


More  of 

dr-chuck’s 

photos 


www.flickr.com 


This  site  contains  a bunch  of  stuff  includinq  software,  tele 
miscellaneous  material.  This  also  includes  a number  of  activities  and  s 


my  good  friend  Richard  Wiggins. 

<font> 

Recent  Video: 

<font> 

John  Merlin  Williams  Goes  Street  Racing 

<font> 

Recent  Video: 

<f ont  > 

Dr.  Chuck  Goes  Motocross  Racing  on  hi 

Teaching 

S1 182 « Building  Applications  for  Information  Environments 
SI  539  • Design  of  Complex  Web  Sites  (Rails) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts] 


* * 

Outline  Frames 
Outline  Headings 
Outline  Links 
Outline  Tables 

Outline  Block  Level  Elements 


✓ Outline  Deprecated  Elements 


Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 


View  Source  T Optior 


Q Now 
ct  TV 

Web/Multimedia  sites 

A Film  About  Brent  and  His  ATVl 

Hour  to  Install  a hardwood  floor  In  4 minutes!  | 

Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 

Nuthin'  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's  through  2004 
More  Multimedia  Projects... 

Software  Tools 

PHP  Image  software  for  v300  and  Treo-600  SMS  1 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 

Other  tofcwra  Tools! 

Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Version  1, 


V Show  Element  Names  When  Outlining 


Sakai  and 

uPortal  at  UNISA  - Johan  van 
den  Berg 

Produced:  June  6.  2006  This 
video  was  taped  while  are  the 
Sakai  meeinq  in  Vancouver. 
Johan  discusses  their  upcoming 
project  to  inteqrate  uPortal  and 
Sakai  to  produce  the  UNISA 
campus  portal.  Johan  attended 
both  the  Sakai  and  JA-Siq 
meetinqs  and  descibed  the 
UNISA  approach  to  both 
cmmunities.  Details:  3 minutes, 
Windows  Media  300  kbps. 


This  is  a randomly  selected  show 


Done 


O 


Summary 


• Thankfully  we  can  assume  that  browsers  in  the  marketplace  have  decent 
support  for  CSS 

• So  we  can  switch  to  the  best  practice 

• HTML  contains  content  and  semantic  markup 

• CSS  styles  the  tags  and  semantics 

• This  is  a really  quick  overview  - use  the  web  or  a book  to  get  more  detail 


